import { ExceptionHandler } from './../../../handler/exception.handler';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Tools } from 'src/app/common/tools/tools';
import { OrganizationService } from 'src/app/services/organization.service';
import { NzModalService } from 'ng-zorro-antd/modal';

@Component({
  selector: 'zepride-other',
  templateUrl: './other.component.html',
  styleUrls: ['./other.component.less']
})
export class OtherComponent implements OnInit {
  isVisible = false;
  isOkLoading = false;
  validateForm!: FormGroup;

  memos: MemoItem[] = [];
  org;
  curMemo: MemoItem;

  constructor(
    private fb: FormBuilder,
    private orgSvr: OrganizationService,
    private modal: NzModalService
  ) {

  }

  async ngOnInit() {
    this.validateForm = this.fb.group({
      title: [null, [Validators.required, Validators.maxLength(10)]],
      titleContent: [null, [Validators.required]],
    });

    this.org = await this.getOrgInfo();
    if (this.org.extends) {
      this.memos = this.org.extends.memos;
    }

  }

  getOrgInfo() {
    const orgId = localStorage.getItem('orgid');
    return this.orgSvr.getOrganizationInfoById(orgId);
  }

  validate() {
    for (const ctrl in this.validateForm.controls) {
      if (Object.prototype.hasOwnProperty.call(this.validateForm.controls, ctrl)) {
        const control = this.validateForm.controls[ctrl];
        control.markAsTouched();
        control.updateValueAndValidity();
      }
    }
    return this.validateForm.valid;
  }

  showModal() {
    this.isVisible = true;
  }
  handleCancel() {
    this.isVisible = false;
    this.validateForm.reset();
  }

  async handleOk() {
    if (this.validate()) {
      this.memos || (this.memos = []);
      if (this.curMemo) {
        this.curMemo.name = this.validateForm.controls.title.value;
        this.curMemo.content = this.validateForm.controls.titleContent.value;
      }
      else {
        let memo = new MemoItem();
        memo.name = this.validateForm.controls.title.value;
        memo.content = this.validateForm.controls.titleContent.value;
        this.memos.push(memo);
      }

      await this.updateMemo();

      this.isVisible = false;
      this.validateForm.reset();
      this.curMemo = null;
    }
  }

  async updateMemo() {
    try {
      this.org.extends || (this.org.extends = {});
      this.org.extends.memos = this.memos;
      await this.orgSvr.updateOrganization(this.org);
    } catch (error) {
      ExceptionHandler.current.handleError(error);
    }
  }

  editMemo(item: MemoItem) {
    this.curMemo = item;
    this.validateForm.controls.title.setValue(item.name);
    this.validateForm.controls.titleContent.setValue(item.content);
    this.showModal();
  }

  async delMemo(item: MemoItem, index) {
    this.modal.confirm({
      nzTitle: `提示信息`,
      nzContent: `是否要删除【${item.name}】？`,
      nzOkText: '删除',
      nzOkType: 'primary',
      nzOnOk: async () => {
        this.memos.splice(index, 1);
        await this.updateMemo();
      },
      nzCancelText: '取消',
      nzOnCancel: () => console.log('Cancel')
    });

  }
}

class MemoItem {
  id: string = Tools.GetGuid();
  index: number = 0;
  name: string;
  content: string;
  color: string = Tools.getRandColor()
}
